<template>
   <div class="bar-chart">
    <div ref="chart" :style="{ width: chartTransWidth, height: chartTransHeight }"></div>
  </div>
</template>

<script>
import { isEmpty } from "lodash"
// import * as Echarts from "echarts"
// import * as components from 'base/components'
import { Echarts } from 'base/components'
export default {
  name: 'bar',
  props: {
    value: null,
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    barLists: {
      type: Array,
      default: () => []
    },
    chartWidth: {
      type: Number,
      default: 200
    },
    chartHeight: {
      type: Number,
      default: 100
    },
  },
  data() {
    return {
      initLists: [{name: "Mon", value: "120"},{name: "Tue", value: "200"},{name: "Wed", value: "150"},{name: "Thu", value: "80"},{name: "Fri", value: "70"}]
    }
  },
  mounted() {
     this.drawChart()
  },
  computed: {
    isDesigner() {
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    lists() {
     return this.isDesigner ? this.initLists : isEmpty(this.barLists) ? this.initLists : this.barLists
    },
    chartTransWidth() {
      return this.chartWidth + 'px'
    },
    chartTransHeight() {
      return this.chartHeight + 'px'
    }
  },
  methods: {
      drawChart() {
      // const { Echarts } = components
      const chart = Echarts.init(this.$refs.chart);
      const option = {
        xAxis: {
          type: "category",
          data: this.lists.map((item) => item.name),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.lists.map((item) => item.value),
            type: "bar",
          },
        ],
      };

      chart.setOption(option);
    },
  }
};
</script>
<style lang="scss" scoped>
.bar-chart {
  width: 100%;
}
</style>
